<template>
	<div
		style="height:100%;width:100%;overflow-x:hidden;overflow-y:hidden;background:white;"
		id="export_leader"
	>
		<md-toolbar md-elevation="0" class="md-primary md-dense" md-alignment="centered">
			<span class="md-title">{{chartTitle+getLangText(label.leader)}}</span>
			<span class="md-toolbar-section-end">
				<md-button class="md-icon-button" @click="exportBoard">
					<i class="iconfont iconexport"></i>
				</md-button>

				<md-button class="md-icon-button" @click="refreshBoard">
					<i class="iconfont iconrefresh"></i>
				</md-button>
				<md-button class="md-icon-button" @click="fullScreen" @keydown.esc="fullScreen">
					<i :class="['iconfont', isFullscreen?'icontuichuquanping':'iconquanping']"></i>
				</md-button>
			</span>
		</md-toolbar>
		<div class="md-dense-body" id="leader_body">
			<div class="dash-board" id="leader_dashboard" :style="bgResult"></div>
		</div>

		<div
			id="leader_chart_card_idx_"
			class="chart-card dashboard"
			style="display:none;position:absolute;"
			data-idx="_idx_"
		>
			<div class="chart-card-header1">_title_</div>
			<div id="leader_chart_idx_" class="chart-card-content"></div>
		</div>
	</div>
</template>
<script>
	import GridCard from "@/components/util/GridCard.js";
	import ChartDataUtil from "@/components/util/chartDataUtil.js";
	import ExportUtil from "@/components/util/exportUtil.js";
	export default {
		name: "LeaderDetail",
		data() {
			return {
				langType: window.localStorage.getItem("langType"),
				label: {
					exitFullscreen: { zh: "退出全屏", en: "EXIT FULL SCREEN" },
					fullScreen: { zh: "全屏", en: "FULL SCREEN" },
					leader: { zh: "领导驾驶舱", en: "LeaderShip Cockpit" }
				},
				isFullscreen: false,
				gridCard: null,
				cardList: [],
				chartList: [],
				cardStyleList: [],
				chartTempList: [],
				chartTitle: "",
				bgResult: ""
			};
		},
		methods: {
			/**全屏 */
			fullScreen() {
				var el = document.getElementById("export_leader");

				if (!this.isFullscreen) {
					//进入全屏,多重短路表达式
					(el.requestFullscreen && el.requestFullscreen()) ||
						(el.webkitRequestFullscreen && el.webkitRequestFullscreen()) ||
						(el.mozRequestFullScreen && el.mozRequestFullScreen()) ||
						(el.msRequestFullscreen && el.msRequestFullscreen());
				} else {
					//退出全屏,三目运算符
					document.exitFullscreen
						? document.exitFullscreen()
						: document.webkitExitFullscreen
						? document.webkitExitFullscreen()
						: document.mozCancelFullScreen
						? document.mozCancelFullScreen()
						: "";
				}
				this.isFullscreen = this.isFullscreen ? false : true;
				this.resizeBoard();
			},
			//导出模板
			exportBoard() {
				var that = this;
				$.get(this.API.staticPath + "leader_template.html", function(html) {
					html = html.replace("_template_", that.gridCard.exportHtml());
					html = html.replace("_grid_title_", that.chartTitle);
					ExportUtil.exportFile(html, ".html", "text/html");
				});
			},
			refreshBoard() {
				this.cardList = [];
				this.chartList = [];
				this.cardStyleList = [];
				this.chartTitle = "";
				this.bgResult = "";
				this.gridCard.removeAllCard();
				this.loadTemplate(this.tempId);
			},
			//刷新图表
			refreshCard(id) {},
			//调整图表大小
			resizeChart(id) {
				var chart = this.chartList[id];
				chart.resize(chart.getDom().offsetWidth, chart.getDom().offsetHeight);
			},
			//制作图表
			makeCardByChart(chartOp) {
				var card = document.getElementById("leader_chart_card_idx_");
				var header = card.children[0];
				header.innerText = chartOp.title;

				//设置元素id
				var html = card.outerHTML + "";
				html = html.replace(/_idx_/g, chartOp.chart_id);
				html = html.replace("none", "");
				return html;
			},

			setCardStyle1(style, id) {
				//设置卡片样式
				var card = document.getElementById("leader_chart_card" + id);
				this.setItemStyle(card, style.card);

				//设置标题样式
				var header = card.children[0];
				header.style.fontSize = style.title.fontSize;
				header.style.fontWeight = style.title.fontWeight;
				header.style.color = style.title.fontColor;
				header.style.textAlign = style.title.textAlign;
				this.setItemStyle(header, style.title);
				//设置内容样式
				var content = card.children[1];
				this.setItemStyle(content, style.content);
			},
			//设置元素样式
			setItemStyle(elmt, style) {
				if (!elmt || !style || style == { card: {}, title: {}, content: {} })
					return;
				elmt.style.background = style.color ? style.color : "transparent";
				elmt.style.borderColor = style.borderColor
					? style.borderColor
					: "transparent";
				elmt.style.borderWidth = style.borderWidth ? style.borderWidth : 0;
				elmt.style.borderStyle = style.borderType ? style.borderType : "solid";
				elmt.style.boxShadow =
					style.shadowOffsetX +
					" " +
					style.shadowOffsetY +
					" " +
					style.shadowBlur +
					" " +
					style.shadowColor;
				elmt.style.opacity = style.opacity ? style.opacity : 1;
				elmt.style.borderRadius = style.borderRadius ? style.borderRadius : 0;
			},

			//添加模板卡片
			addTemplateCard(idx) {
				var that = this;
				if (idx < this.chartTempList.length) {
					var chart_id = this.chartTempList[idx].chart_id,
						style = this.chartTempList[idx].style,
						pos = this.chartTempList[idx].pos;

					ChartDataUtil.getChartAndData(chart_id, function(option) {
						if (option) {
							that.cardList.push(option);
							that.cardStyleList.push(pos);
							var html = that.makeCardByChart(option);
							that.gridCard.addFixedCard(html, pos);
							ChartDataUtil.setChart(
								"leader_chart" + option.chart_id,
								option,
								function(chart) {
									that.chartList.push(chart);
									that.setCardStyle1(style, option.chart_id);
								}
							);
						} else {
							that.alertTip =
								that.getLangText(that.label.loadDataFail) +
								"\n" +
								"ID:" +
								chart_id;
							that.isAlert = true;
						}
						if (idx + 1 < that.chartTempList.length) {
							setTimeout(function() {
								that.addTemplateCard(idx + 1);
							}, 2000);
						} else {
							document.getElementById("wait_page").style.display = "none";
						}
					});
				} else {
					document.getElementById("wait_page").style.display = "none";
				}
			},

			/**根据id获取模板信息 */
			loadTemplate(id) {
				var that = this;

				ChartDataUtil.getTemplate(id, function(option) {
					if (option) {
						that.chartTitle = option.title;
						that.bgResult = option.bg.result;
						that.chartTempList = option.chartList;
						document.getElementById("wait_page").style.display = "flex";
						that.addTemplateCard(0);
					} else {
						that.alertTip = that.getLangText(that.label.templateFail);
						that.isAlert = true;
					}
				});
			},
			resizeBoard() {
				var that = this;
				setTimeout(function() {
					that.gridCard.resizeGrid();
					for (var i = 0; i < that.chartList.length; i++) {
					that.resizeChart(i);
				}
				}, 100);

				
			}
		},
		mounted() {
			var that = this;
			this.gridCard = new GridCard("leader_dashboard");
			document.getElementsByTagName("body")[0].onresize = function() {
				that.resizeBoard();
			};
			setTimeout(function() {
				var address = window.location.hash;
				if (address.indexOf("tempId") >= 0) {
					that.tempId = address.split("=")[1];
					that.loadTemplate(that.tempId);
				}
			}, 1000);
		}
	};
</script>
<style lang="scss" scoped>
</style>
